﻿@using BookShop.Library.Constant
@model BookShop.DTO.Order
@{
    ViewBag.Title = Model.Id + " - Sửa Đơn hàng";
}

<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-edit"></i>@ViewBag.Title
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" id="formEditOrder" method="POST" enctype="multipart/form-data" action="@Url.Action("Edit")">
            <input type="hidden" name="orderId" id="orderId" value="@Model.Id"/>
            <div class="form-body">
                <div class="alert alert-danger display-hide" style="display: none;">
                    <button class="close" data-close="alert"></button>
                    @AlertMessage.InvalidInput
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Khách hàng <span class="required">*</span></label>
                        <div class="col-md-4">
                            <select class="form-control input-large bs-select" id="customerId" name="customerId" data-live-search="true"></select>
                            <span class="help-block" for="customerId"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Trạng thái</label>
                        <div class="col-md-4">
                            <select class="form-control" name="status" id="status">
                                <option value="@OrderStatus.New">New</option>
                                <option value="@OrderStatus.Paid">Paid</option>
                                <option value="@OrderStatus.WaitingForPayment">WaitingForPayment</option>
                                <option value="@OrderStatus.Inactive">Inactive</option>
                            </select>
                            <span class="help-block" for="status"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions right">
                <button class="btn blue" type="submit">Thêm</button>
                <a href="@Url.Action("List")" class="btn default">Quay lại</a>
            </div>
        </form>
    </div>
</div>

@section css
{
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.css")"/>
    <link href="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.css")" rel="stylesheet" type="text/css"/>
}

@section javascript
{
    <script src="@Url.Content("~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    @if (TempData[AlertMessage.TempDataKey] != null)
    {
        <script type="text/javascript">
            toastr['error']('@TempData[AlertMessage.TempDataKey].ToString()', 'Error');
            toastr.option = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "1000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        </script>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('.bs-select').selectpicker({
            });
            $('#status').val('@Model.Status');
            getCustomers();
            validateEdit();
        });
        function getCustomers() {
            $("#customerId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAllCustomer")',
                data: {},
                success: function (customers) {
                    $.each(customers, function (i, customer) {
                        $("#customerId").append('<option value="' + customer.Id + ' - ' + customer.FullName + '</option>');
                    });
                    $('#customerId').selectpicker('refresh');
                    $('#customerId').selectpicker('val', '@Model.CustomerId');
                },
                error: function () {
                }
            });
            return false;
        }
        function validateEdit() {
            var form1 = $('#formEditOrder');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    orderId: {
                        required: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}